<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <title>设备历史</title>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/map.css"/>
    <script src="../../leaflet/leaflet.js"></script>
    <script src="../../leaflet/leaflet.marker.highlight.js"></script>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.marker.highlight.css"/>
</head>
<body>
<div id="map"></div>
<script src="../../js/mapSource.js"></script>
<script src="../../js/lib/jquery-3.2.1.min.js"></script>
<script src="../../js/layer.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/lib/echarts.common.min.js"></script>
<script>
    layerManager.setMap(map);
    layerManager.setBaseLayer(BaseLayers.getMapBoxUrl(), BaseLayers.getLayerDetails(0).id, BaseLayers.getToken());
    layerManager.addOverLayer(mapSource.F1.url, mapSource.F1.layer);
    layerManager.createOverLayer();

    map.on('click', function (e) {
        console.log(e.latlng);
        addFlicker(e.latlng.lat,e.latlng.lng);
        createCharts("ss","温度传感器",e.latlng);
    })

    map.fitBounds([[34.823905944824, 113.557327270508],
        [34.8256912231445, 113.558494567871]]);



    function createCharts(id, title, point) {

        var myIcon = L.divIcon({
            iconAnchor:[0,150],
            className: 'my-div-icon', iconSize: [170, 150],
            html: "<div id='"+id+"' style='height: 150px;width: 170px;position:relative;'></div>"
        });
        L.marker(point, {
            icon: myIcon
        }).addTo(map);

        var myChart = echarts.init(document.getElementById(
            id
        ));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "温度传感器",
                textStyle:{
                    color:"#FF0000"
                }
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
               // show:false
                type: 'category'
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '报警',
                type: 'line',
                data: [85, 20, 30, 65, 33, 40, 80]
            }],
            grid:{
                left:"12%",
                top:0,
                bottom:"2%",
                right:0
            }

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.resize();
    }


</script>
</body>
</html>